<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>银行卡余额计算</title>
    <style>
        caption {
            font-weight: 600;
            text-align: center;
        }

        table {
            text-align: center;
            border-collapse: collapse;
            margin: 0 auto;
        }

        th,
        td {
            padding: 0 20px;
            height: 30px;
        }
    </style>
</head>

<body>


    <script>
        // 1、用户输入总的银行卡金额，依次输入本月花费的电费，水费，网费。
        // 2、页面打印一个表格，计算出本月银行卡还剩下的余额。 
        let money = prompt('请输入银行卡金额：')
        let water = prompt('请输入水费金额：')
        let dian = prompt('请输入电费金额：')
        let internet = prompt('请输入网费金额：')
        // 银行卡余额
        let rest = money - water - internet - dian

        document.write(`
     
    <table border="1" cellpadding='0' cellspacing='0'>
         <caption>2020年12月费用支出</caption>
        <tr>
            <th>银行卡余额</th>
            <th>水费</th>
            <th>电费</th>
            <th>网费</th>
            <th>银行卡余额</th>
        </tr>
        <tr>
            <td>${money}元</td>
            <td>${water}元</td>
            <td>${dian}元</td>
            <td>${internet}元</td>
            <td>${rest}元</td>
        </tr>

    </table>
        `)

    </script>
</body>

</html>